<template>
	<view>
		<view class="dormitoryTitle" >
			<view v-for="(item,index) in dormitoryTtileArr" :key="item.id" @click="changeTitleFun(item,dormitoryTtileArr)">
				<span>{{item.title}}</span>
				<view class="dormitoryHealthLine" v-show="item.isShow"></view>
			</view>							
		</view>
	</view>
</template>

<script>
	export default {
		name:"dormitoryTitle",
		data(){
			return {
				dormitoryTtileArr:[
					{
						id:2,
						title:'二楼',
						isShow:true,
					},
					{
						id:3,
						title:'三楼',
						isShow:false,
					},
					{
						id:4,
						title:'四楼',
						isShoe:false,
					},
					{
						id:5,
						title:'五楼',
						isShow:false,
					},
					{
						id:6,
						title:'六楼',
						isShow:false,
					},
				],
			}
		},
		methods:{
			changeTitleFun(item,arr){
				for (let i in arr) {
					if(item.title!=arr[i].title){
						arr[i].isShow = false
					}
				}
				item.isShow = true
			}
		}
	}
</script>

<style>
	.dormitoryHealthLine{
		width:90rpx;
		height:8rpx;
		background:rgba(239, 220, 11, 1.0);
		opacity:0.78;
		position: relative;
		bottom: -10rpx;
		left:-10rpx;
	}
	.dormitoryTitle{
		color:#0000FF;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
	}
</style>
